﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>查询分析</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script type="text/javascript" src="https://momentjs.com/downloads/moment.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <el-card>
            <el-row>
                <el-col>
                    <el-radio-group v-model="radioTimeValue" v-on:change="queryTypeChange" size="small">
                        <template v-for="time in radioTime" :key="time.value">
                            <el-radio-button :label="time.value">
                                {{time.text}}
                            </el-radio-button>
                        </template>
                    </el-radio-group>
                    <el-date-picker v-show="radioTimeValue==4" size="small" v-model="timer" type="datetimerange"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button type="primary" v-on:click="query" size="small">查询</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="tableData" bordered size="small"
                              :default-sort="{prop: 'machineName', order: 'asc'}">
                        <el-table-column prop="machineName" label="机器名称" sortable></el-table-column>
                        <el-table-column prop="nomral" label="上号次数" sortable>
                            <template slot="header" slot-scope="scope">
                                上号次数({{agvNomral}})
                            </template>
                            <template slot-scope="scope">
                                {{scope.row.nomral}}
                                <el-tag size="mini" :type="scope.row.nomral < agvNomral?'danger':'success'">
                                    <span v-if="scope.row.nomral >= agvNomral">+</span>{{((scope.row.nomral/agvNomral)*100-100).toFixed(2)}}%&nbsp;
                                    <span v-if="scope.row.nomral >= agvNomral">+</span>
                                    {{(scope.row.nomral-agvNomral)}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="success" label="成功次数" sortable>
                            <template slot="header" slot-scope="scope">
                                成功次数({{agvSuccess}})
                            </template>
                            <template slot-scope="scope">
                                {{scope.row.success}}
                                <el-tag size="mini" :type="scope.row.success < agvSuccess?'danger':'success'">
                                    <span v-if="scope.row.success >= agvSuccess">+</span>{{((scope.row.success/agvSuccess)*100-100).toFixed(2)}}%&nbsp;
                                    <span v-if="scope.row.success >= agvSuccess">+</span>
                                    {{scope.row.success-agvSuccess}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="error" label="失败次数" sortable>
                            <template slot="header" slot-scope="scope">
                                失败次数({{agvError}})
                            </template>
                            <template slot-scope="scope">
                                {{scope.row.error}}
                                <el-tag size="mini" :type="scope.row.error >= agvError?'danger':'success'">
                                    <span v-if="scope.row.error >= agvError">+</span>{{((scope.row.error/agvError)*100-100).toFixed(2)}}%&nbsp;
                                    <span v-if="scope.row.error >= agvError">+</span>
                                    {{(scope.row.error-agvError)}}
                                </el-tag>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: function () {
                return {
                    radioTime: [
                        { value: "5", text: "1时" },
                        { value: "6", text: "3时" },
                        { value: "7", text: "6时" },
                        { value: "8", text: "12时" },
                        { value: "1", text: "日" },
                        { value: "2", text: "周" },
                        { value: "3", text: "月" },
                        { value: "4", text: "自定义" }
                    ],
                    tableData: [
                    ],
                    agvSuccess: 0,
                    agvNomral: 0,
                    agvError: 0,
                    radioTimeValue: 1,
                    timer: [new Date(), new Date()]
                }
            },
            mounted: function () {
                this.query()
            },
            methods: {
                queryTypeChange: function (e) {
                    console.log(e)
                    if (e == 4)
                        return;
                    else {
                        this.query();
                    }
                },
                query: function () {
                    axios.get("/queryAccountRecord", {
                        params: {
                            type: this.radioTimeValue,
                            sTime: this.timer[0],
                            eTime: this.timer[1]
                        }
                    }).then(function (response) {
                        console.log(response);
                        if (response.data.lenght == 0) {
                            app.tableData = response.data
                            return;
                        }
                        let totalSuccess = 0;
                        let totalNomral = 0;
                        let totalError = 0;
                        response.data.forEach(function (item) {
                            totalError += item.error;
                            totalNomral += item.nomral;
                            totalSuccess += item.success;
                        });
                        app.agvNomral = parseInt(totalNomral / response.data.length);
                        app.agvSuccess = parseInt(totalSuccess / response.data.length);
                        app.agvError = parseInt(totalError / response.data.length);
                        app.tableData = response.data
                    });
                }
            }
        });
    </script>
</body>

</html>